<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" >

      <template slot="blank_1541642936000_42554" slot-scope="scope">
        <!-- 票据金额 -->
        <!-- 通过 v-model="scope.model.blank_1541642936000_42554" 绑定数据 -->
        <el-col :span="6"><el-input v-model="input1" placeholder=""/></el-col>
        <el-col :span="3" style="text-align:center;">到</el-col>
        <el-col :span="6"><el-input v-model="input2" placeholder=""/></el-col>
      </template>

    </generate-form>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonDataTable" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <template slot="table_dialog" slot-scope="scope">
        <generate-form :ref="scope.form" :data="jsonDataEdie" :remote="remoteFuncs" :value="scope.data"/>
      </template>
    </generate-table>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      input1: '',
      input2: '',
      jsonData:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '查询账户',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541642786000_84819'
                      },
                      'key': '1541642786000_84819',
                      'model': 'input_1541642786000_84819',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '票据类型',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'BillType'
                      },
                      'key': '1541642800000_51006',
                      'model': 'select_1541642800000_51006',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541642785000_83247'
              },
              'key': '1541642785000_83247',
              'model': 'grid_1541642785000_83247',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '票据号',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541642853000_35222'
                      },
                      'key': '1541642853000_35222',
                      'model': 'input_1541642853000_35222',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'blank',
                      'name': '票据金额',
                      'icon': 'chalkboard',
                      'options': {
                        'defaultType': 'String',
                        'remoteFunc': 'func_1541642936000_42554'
                      },
                      'key': '1541642936000_42554',
                      'model': 'blank_1541642936000_42554',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541642846000_62110'
              },
              'key': '1541642846000_62110',
              'model': 'grid_1541642846000_62110',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': []
                },
                {
                  'span': 10,
                  'list': []
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541642952000_61518'
              },
              'key': '1541642952000_61518',
              'model': 'grid_1541642952000_61518',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '出票日期从',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'daterange',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541642961000_37250'
                      },
                      'key': '1541642961000_37250',
                      'model': 'date_1541642961000_37250',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '到期日期从',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'daterange',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541643060000_95325'
                      },
                      'key': '1541643060000_95325',
                      'model': 'date_1541643060000_95325',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541642953000_25055'
              },
              'key': '1541642953000_25055',
              'model': 'grid_1541642953000_25055',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      jsonDataTable:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '票据号码',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541643360000_28517'
                      },
                      'key': '1541643360000_28517',
                      'model': 'input_1541643360000_28517',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '票据类型',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'BillType'
                      },
                      'key': '1541643367000_37433',
                      'model': 'select_1541643367000_37433',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541643331000_99360'
              },
              'key': '1541643331000_99360',
              'model': 'grid_1541643331000_99360',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '票据金额',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541643423000_44711'
                      },
                      'key': '1541643423000_44711',
                      'model': 'input_1541643423000_44711',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '出票日期',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'date',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541643435000_35267'
                      },
                      'key': '1541643435000_35267',
                      'model': 'date_1541643435000_35267',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541643413000_72005'
              },
              'key': '1541643413000_72005',
              'model': 'grid_1541643413000_72005',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '到期日期',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'date',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541643445000_13938'
                      },
                      'key': '1541643445000_13938',
                      'model': 'date_1541643445000_13938',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '收票单位',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541643501000_49740'
                      },
                      'key': '1541643501000_49740',
                      'model': 'input_1541643501000_49740',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541643443000_39698'
              },
              'key': '1541643443000_39698',
              'model': 'grid_1541643443000_39698',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '出票单位',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541643513000_71558'
                      },
                      'key': '1541643513000_71558',
                      'model': 'input_1541643513000_71558',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '收票单位账号',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'number',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541643528000_49625'
                      },
                      'key': '1541643528000_49625',
                      'model': 'input_1541643528000_49625',
                      'rules': [
                        {
                          'type': 'number',
                          'message': '收票单位账号格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541643511000_11472'
              },
              'key': '1541643511000_11472',
              'model': 'grid_1541643511000_11472',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': true,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      jsonDataEdie: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '备注',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541643814000_66839'
                    },
                    'key': '1541643814000_66839',
                    'model': 'input_1541643814000_66839',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '收款人手机号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'number',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1541643826000_16569'
                    },
                    'key': '1541643826000_16569',
                    'model': 'input_1541643826000_16569',
                    'rules': [
                      {
                        'type': 'number',
                        'message': '收款人手机号格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1541643813000_63434'
            },
            'key': '1541643813000_63434',
            'model': 'grid_1541643813000_63434',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': true,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {

        BillType(resolve) {
          // 票据类型 select_1541642800000_51006
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('票据类型').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
